<template>
  <div class="container">

    <div class="lab-grid">
      <div v-for="(lab, index) in LabInfo" :key="index" class="lab-card" @click="showDetails(index)">
        <img :src="lab.thumbnail" alt="Lab Thumbnail" class="lab-thumbnail">
        <div class="lab-details">
          <p><strong>地址：</strong>{{ lab.address }}</p>
          <p><strong>管理员：</strong>{{ lab.chargePerson }}</p>
          <p><strong>简介：</strong>{{ lab.detail }}</p>
        </div>
      </div>
    </div>

    <!-- 详情弹出框 -->
    <el-dialog :visible.sync="dialogVisible" title="实验室详情" width="600px">
      <div v-if="selectedLab !== null">
        <p><strong>实验室ID: </strong>{{ LabInfo[selectedLab].laboratoryId }}</p>
        <p><strong>实验室地址: </strong>{{ LabInfo[selectedLab].address }}</p>
        <p><strong>实验室面积: </strong>{{ LabInfo[selectedLab].area }} km²</p>
        <p><strong>管理员: </strong>{{ LabInfo[selectedLab].chargePerson }}</p>
        <p><strong>详情: </strong>{{ LabInfo[selectedLab].detail }}</p>
        <p><strong>造价: </strong>{{ LabInfo[selectedLab].facilitiesPrice }}</p>
        <p><strong>实验室联系方式: </strong>{{ LabInfo[selectedLab].phone }}</p>
        <p><strong>资源: </strong>{{ LabInfo[selectedLab].resourceName }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Laboratory',
  data() {
    return {
      LabInfo: [],
      selectedLab: null,
      dialogVisible: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      try {
        const res = await this.$API.laboratory.getLabList()
        if (res.success) {
          this.LabInfo = res.data.items
        } else {
          throw new Error(res.message)
        }
      } catch (error) {
        console.error('Error fetching LabInfo:', error)
      }
    },
    showDetails(index) {
      this.selectedLab = index
      this.dialogVisible = true
    },
    closeDialog() {
      this.dialogVisible = false
      this.selectedLab = null
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
}

.lab-card {
  border: 1px solid #ccc;
  padding: 20px;
  display: flex;
  flex-direction: column;
  cursor: pointer; /* 添加指针样式以表示可点击 */
}

.lab-thumbnail {
  max-width: 100%;
  height: auto;
}

.lab-details {
  margin-top: 10px;
}

.lab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 20px;
  max-height: 80vh; /* 限制整个网格布局的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
